<template>
	<view class="trouble-container">
		<view class="fix-top">
			<view class="nav-header">
				<view class="nav-left-btn" @click="back">
					< </view>
						<view class="nav-header-title">
							<text class="title">
								劳保
							</text>
						</view>
						<view class="nav-right-btn">

						</view>
				</view>

				<view class="sec">
					<view v-for="(item, index) in tabsList" :key="index" @click="sectionChange(index)" class="list">
						<view class="primary" :class="tabsActive == index ? 'active' : ''">
							<text class="label">{{item}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 	<template v-if="tabsActive == 0">
			<Grant :activeMenu="tabsActive"/>
		</template>
		<template v-if="tabsActive == 1">
			<Sign :activeMenu="tabsActive" />
		</template> -->
			<components :is="isComponent" :activeMenu="tabsActive"></components>

		</view>
</template>

<script>
	import Grant from "./components/grant.vue"
	import Sign from "./components/sign.vue"
	import { laobaoMenu} from "@/utils/menuAuth.js"
	export default {
		components: {
			Grant,
			Sign,
		},
		data() {
			return {
				isComponent: null,
				tabsList: ['物资发放', '物资签收'],
				tabsActive: null
			}
		},
		methods: {
			sectionChange(index) {
				console.log("index==", index)
				this.tabsActive = index;
				if (index == 0) {
					this.isComponent = Grant
				} else if (index == 1) {
					this.isComponent = Sign
				}
			},
			//判断有没有权限
			judgeMenuAuth() {
				let menuObj = laobaoMenu()
				let {
					tabsActive,
					tabsList
				} = menuObj
				this.tabsActive = tabsActive
				this.tabsList = tabsList
				console.log("劳保测试对象", menuObj)
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},


		},
		watch: {
			tabsActive(val) {
				console.log("监听", val)
				if (val == 0) {
					this.isComponent = Grant
				} else if (val == 1) {
					this.isComponent = Sign
				}
			}
		},
		mounted(){
			this.judgeMenuAuth()
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}

	};
</script>

<style lang="scss" scoped>
	.trouble-container {
		width: 100vw;
		height: 100vh;
		// padding: 24rpx;
		background: #FBFBFB;
		// background: linear-gradient(180deg, #B8D7FF 0%, rgba(202, 231, 255, 0.4) 100%);

		.fix-top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			padding-bottom: 20rpx;
			// background: linear-gradient(360deg, #f2f2f26b 10%, #B8D7FF 100%);
			background: #B8D7FF;

			/* 确保导航栏在顶部 */
			.nav-header {
				color: rgb(51, 51, 51);
				background-color: transparent;
				height: 154rpx;
				display: flex;
				padding: 0 10px;
				flex-direction: row;

				.nav-left-btn {
					display: flex;
					width: 60px;
					justify-content: flex-start;
					align-items: center;
					color: #666666;
				}

				.nav-header-title {
					display: flex;
					flex: 1;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					padding: 0 10px;
					overflow: hidden;

					.title {
						font-weight: 600;
						font-size: 32rpx;
						color: #17233D;
					}
				}

				.nav-right-btn {
					display: flex;
					width: 60px;
					justify-content: flex-end;
					align-items: center;
				}
			}

			.sec {
				display: flex;
				justify-content: space-between;
				width: 100%;
				margin: 0 auto;

				.list {
					display: flex;
					flex: 1;
					justify-content: center;
					overflow: hidden;

					.active {
						.label {
							height: 44rpx;
							line-height: 44rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #137EE9;
							border-bottom: 2px solid #137ee9;
						}
					}
				}
			}

			/*  */

		}


	}
</style>